<template>
  <t-modal
    :title="title"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok');
      }
    "
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
				<a-form-item class="hiddenItem">
					<a-input v-decorator="['uuid']" disabled type="hidden" />
				</a-form-item>
        <a-form-item
          label="名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
						placeholder="名称"
            v-decorator="['buttonName', { rules: [{ required: true, message: '请输入名称！' }] }]"
          />
        </a-form-item>
				<a-form-item
				  label="编码"
				  :labelCol="labelCol"
				  :wrapperCol="wrapperCol"
				>
				  <a-input
						placeholder="编码"
				    v-decorator="['buttonCode', { rules: [{ required: true, message: '请输入编码！' }] }]"
				  />
				</a-form-item>
				<a-form-item
				  label="状态"
				  :labelCol="labelCol"
				  :wrapperCol="wrapperCol"
				>
					<t-dict-select-tag
						type="select"
						dictCode="MenuStatus"
						placeholder="请选择状态"
						:allowClear="false"
						v-decorator="['buttonStatus', {initialValue: 'MenuStatus.01', rules: [{ required: true, message: '请选择状态！' }] }]"
					/>
				</a-form-item>
				<a-form-item
				  label="排序"
				  :labelCol="labelCol"
				  :wrapperCol="wrapperCol"
				>
				  <a-input-number
						placeholder="排序"
						:min="1"
						:max="9999"
				    v-decorator="['buttonSort']"
				  />
				</a-form-item>
				<a-form-item
				  label="备注"
				  :labelCol="labelCol"
				  :wrapperCol="wrapperCol"
				>
					<a-textarea
						v-decorator="['buttonRemake']"
						placeholder="备注"
						:auto-size="{ minRows: 3, maxRows: 5 }"
					/>
				</a-form-item>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";
import { TDictSelectTag } from '@/components'
// 表单字段
const fields = [
	"uuid",
  "buttonName",
  "buttonCode",
  "buttonStatus",
  "buttonSort",
  "buttonRemake"
];
export default {
	components: {
		TDictSelectTag
	},
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
			title: "新增",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 7,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 13,
        },
      },
      form: this.$form.createForm(this),
    };
  },
  methods: {
    
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
};
</script>
